<template>
    <div class="config">
        <div class="content">
            <h1 class="content-title">系统配置文件</h1>
            <div class="content-form">
                <el-col v-for="(item, i) in systemParam" :key="item.paramKey" :span="14" class="for-col">
                    <div>
                        <div class="label" :title="item.paramInfo">{{ item.paramInfo }}</div>
                        ：
                        <!-- #9811前海开源 ufx接口配置账户密码配置加密 -->
                        <template v-if="['yhfin.risk.hs-ufx.account', 'yhfin.risk.hs-ufx.password'].includes(item.paramKey)">
                            <el-input
                                v-model="item.paramValue"
                                @keyup.enter.native="blurEvent(item, i)"
                                placeholder="回车键确认"
                                :disabled="!userInfo.superuser"
                                style="width: calc(100% - 60% - 85px)"
                                size="small"
                            >
                            </el-input>
                            <el-checkbox
                                size="small"
                                label="加密"
                                style="margin-left: 5px; width: 80px; border: 1px solid #646464"
                                border
                                @change="handleEncrypt($event, item.paramKey)"
                            ></el-checkbox>
                        </template>
                        <el-input
                            v-else
                            size="small"
                            v-model="item.paramValue"
                            @blur="blurEvent(item, i)"
                            @keyup.enter.native="blurEvent(item, i)"
                            placeholder="回车键确认"
                            :disabled="!userInfo.superuser"
                        ></el-input>
                    </div>
                </el-col>
            </div>
            <div>
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="total, prev, pager, next"
                    :current-page="pages.currentPage"
                    :page-size="pages.pageSize"
                    :total="pages.total"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { IUserInfo, UserModule } from '@/store/modules/user';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'SystemConfigFile',
    components: {},
})
export default class SystemConfigFile extends Vue {
    private systemParam = [];
    private systemParamCopy = []; // 复制一份最后一次请求的数据来对比输入框为空时，回退数据显示
    // 分页
    private pages: pages = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
    };

    encrypt: boolean = false;

    get userInfo(): IUserInfo {
        return UserModule.userInfo;
    }
    mounted() {
        this.getQueryList();
    }
    // 获取列表
    getQueryList() {
        this.$axios
            .post('/appConfigParam/query', {
                appModule: '',
                paramInfo: '',
                paramKey: '',
                paging: { ...this.pages },
            })
            .then((res: any) => {
                this.pages.total = res.total;
                this.systemParam = res.list;
                this.systemParamCopy = JSON.parse(JSON.stringify(this.systemParam));
            });
    }
    // 失去焦点或者回车键更新数据
    blurEvent(param, index) {
        if (this.systemParamCopy[index].paramValue == param.paramValue) {
            // this.yh_message_info('无修改！');
            return;
        }
        if (param.paramValue.trim() == '') {
            this.yh_message_info('输入值不可为空！');
            this.systemParam[index].paramValue = this.systemParamCopy[index].paramValue;
            return;
        }
        if (['是否开发CDC监控', '是否展示错误结果', '引擎启动后监控屏是否全量计算', '是否开启监控屏计算'].includes(param.paramInfo)) {
            if (!['TRUE', 'FALSE'].includes(param.paramValue)) {
                this.yh_message_warn('输入格式有误，请输入"TRUE"或者"FALSE"！');
                return;
            }
        }
        this.$axios.put('/appConfigParam/update', { ...param }).then((res: any) => {
            this.yh_message_success('修改成功！');
            this.getQueryList();
        });
    }

    /**
     * 加密解密事件
     */
    handleEncrypt(type, key): void {
        let value = this.systemParam.find(i => i.paramKey === key).paramValue;
        if (type) {
            this.$axios({ method: 'post', url: '/appConfigParam/encryption', data: { content: value } }).then((res: any) => {
                for (let i = 0; i < this.systemParam.length; i++) {
                    if (this.systemParam[i].paramKey === key) {
                        this.systemParam[i].paramValue = res;
                        this.submitUFX(this.systemParam[i]);
                        break;
                    }
                }
            });
        } else {
            this.$axios({ method: 'post', url: '/appConfigParam/deEncrypt', data: { content: value } }).then((res: any) => {
                for (let i = 0; i < this.systemParam.length; i++) {
                    if (this.systemParam[i].paramKey === key) {
                        this.systemParam[i].paramValue = res;
                        this.submitUFX(this.systemParam[i]);
                        break;
                    }
                }
            });
        }
    }

    /**
     * 提交 ufx账号密码
     */
    submitUFX(data): void {
        this.$axios.put('/appConfigParam/update', { ...data }).then((res: any) => {
            this.yh_message_success('修改成功！');
            this.getQueryList();
        });
    }

    // 分页
    private handleCurrentChange(curPage: number): void {
        this.pages.currentPage = curPage;
        this.getQueryList();
    }
}
</script>
<style lang="scss" scoped>
.config {
    padding: 10px;
    height: 100%;
    overflow: hidden;
    .content {
        // height: 100%;
        .content-title {
            text-align: center;
            margin-bottom: 10px;
        }
        .content-form {
            border: 1px solid #c9c9c9;
            width: 100%;
            height: 80vh;
            overflow: auto;
            padding: 0 5px;
            .for-col {
                padding: 10px 0;

                .label {
                    width: 55%;
                    display: inline-block;
                    text-align: right;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 28px;
                    line-height: 28px;
                    vertical-align: bottom;
                    color: #575757;
                    padding-right: 10px;
                    font-weight: bold;
                }

                /deep/ .el-input {
                    width: calc(100% - 60%);
                }
            }
        }
    }
}
/deep/ .el-button.is-circle {
    padding: 5px !important;
}
/deep/ .el-input__inner {
    border: 1px solid #646464 !important;
}
</style>
